<template>
	<view class="qiu-nav-bar"
		:class="{isTop:isTop}"
		:style="'--paddingTopHeight:'+paddingTopHeight+';--navHeight:'+navHeight+';--navBoxHeight:'+height+';--backColor:'+backColor+';--navWidth:'+width+';--navPadding:'+navPadding+';'"
	>
		<view class="content-box">
			<view class="navBox">
				<view class="left">
					<slot name="left">
						<view class="" @click="$emit('left')">
							{{leftText||''}}
						</view>
					</slot>
				</view>
				<view class="center">
					<slot>
						<view class="" @click="$emit('center')">
							{{text||''}}
						</view>
					</slot>
				</view>
				<view class="right">
					<slot name="right">
						<view class="" @click="$emit('right')">
							{{rightText||''}}
						</view>
					</slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"qiu-nav-bar",
		props:{
			leftText: String,
			text: String,
			rightText: String,
			// 是否保持在顶部
			isTop: Boolean,
			backColor: {
				type: String,
				default: 'white'
			}
		},
		data() {
			return {
				// 导航栏上内边距
				paddingTopHeight: 0,
				// 导航栏高度
				navHeight: 0,
				// 胶囊高度
				height: 0,
				// 胶囊宽度
				width: 0,
				// 内边距|屏幕宽度减去胶囊右边位置
				navPadding: 0
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.$nextTick(()=>{
				let {
					top,// 胶囊上边距离顶部的高度
					bottom,// 胶囊下边距离顶部的高度
					left,// 胶囊左边边距离左部的高度
					right,// 胶囊右边距离左部的高度
					height,// 胶囊高度
					width// 胶囊宽度
				} = uni.getMenuButtonBoundingClientRect();
				// 获取屏幕信息
				let {screenWidth} = uni.getWindowInfo()
				this.paddingTopHeight = top + 'px';
				this.navHeight = height + 'px';
				this.height = (bottom + 5) + 'px';
				this.width = width + 'px';
				this.navPadding = (screenWidth - right) + 'px';
			})
			// #endif
			
			// #ifndef MP-WEIXIN
			this.$nextTick(()=>{
				let boxCssInfo = uni.createSelectorQuery().in(this).select(".content-box");
				boxCssInfo.boundingClientRect(data => {
					this.height = data.height+'px';
		　　    }).exec();
			})
			this.navHeight = 'auto';
			this.paddingTopHeight = 10 + 'px';
			this.width = '50px';
			this.navPadding = 10 + 'px';
			// #endif
		},
		updated() {
			// #ifndef MP-WEIXIN
			this.$nextTick(()=>{
				let boxCssInfo = uni.createSelectorQuery().in(this).select(".content-box");
				boxCssInfo.boundingClientRect(data => {
					this.height = data.height+'px';
		　　    }).exec();
			})
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
.qiu-nav-bar{
	.content-box{
		width: 100%;
		background-color: var(--backColor);
		// #ifdef APP
		padding-top: calc(var(--paddingTopHeight) + var(--status-bar-height));
		// #endif
		// #ifndef APP
		padding-top: var(--paddingTopHeight);
		// #endif
		padding-bottom: var(--navPadding);
		.navBox{
			height: var(--navHeight);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 var(--navPadding);
			.left{
				flex: none;
				height: var(--navHeight);
				width: var(--navWidth);
				display: flex;
				justify-content: flex-start;
				white-space:nowrap;
				display: flex;
				align-items: center;
			}
			.center{
				width: 100%;
				height: var(--navHeight);
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.right{
				flex: none;
				width: var(--navWidth);
				height: var(--navHeight);
				display: flex;
				justify-content: flex-end;
				white-space:nowrap;
				display: flex;
				align-items: center;
			}
		}
	}
}
.isTop{
	&:before{
		content: "";
		display: block;
		height: var(--navBoxHeight);
	}
	.content-box{
		position: fixed;
		box-shadow: 0 -3px 10px rgba(0, 0, 0, 0.6);
		top: 0;
		left: 0;
		z-index: 99;
	}
}
</style>